import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import { SaveOutlined, ReloadOutlined, LockOutlined } from '@ant-design/icons';

const ResetPassword: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      message.success('密码修改成功');
      form.resetFields();
    } catch (error) {
      message.error('密码修改失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    form.resetFields();
    message.info('表单已重置');
  };

  const validateConfirmPassword = (_: any, value: string) => {
    if (!value || form.getFieldValue('newPassword') === value) {
      return Promise.resolve();
    }
    return Promise.reject(new Error('两次输入的密码不一致'));
  };

  return (
    <div className="reset-password-container">
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        autoComplete="off"
      >
        <Form.Item
          label="当前密码"
          name="oldPassword"
          rules={[
            { required: true, message: '请输入当前密码' },
            { min: 6, max: 20, message: '密码长度为6-20个字符' }
          ]}
        >
          <Input.Password
            prefix={<LockOutlined />}
            placeholder="请输入当前密码"
            visibilityToggle
          />
        </Form.Item>

        <Form.Item
          label="新密码"
          name="newPassword"
          rules={[
            { required: true, message: '请输入新密码' },
            { min: 6, max: 20, message: '密码长度为6-20个字符' },
            {
              pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{6,}$/,
              message: '密码必须包含大小写字母和数字'
            }
          ]}
        >
          <Input.Password
            prefix={<LockOutlined />}
            placeholder="请输入新密码"
            visibilityToggle
          />
        </Form.Item>

        <Form.Item
          label="确认新密码"
          name="confirmPassword"
          dependencies={['newPassword']}
          rules={[
            { required: true, message: '请确认新密码' },
            { validator: validateConfirmPassword }
          ]}
        >
          <Input.Password
            prefix={<LockOutlined />}
            placeholder="请再次输入新密码"
            visibilityToggle
          />
        </Form.Item>

        <Form.Item className="form-actions">
          <Button
            type="primary"
            htmlType="submit"
            loading={loading}
            icon={<SaveOutlined />}
            style={{ marginRight: 16 }}
          >
            保存
          </Button>
          <Button
            type="default"
            onClick={handleReset}
            icon={<ReloadOutlined />}
          >
            重置
          </Button>
        </Form.Item>
      </Form>

      <div className="password-tips">
        <h4>密码要求：</h4>
        <ul>
          <li>长度为6-20个字符</li>
          <li>必须包含大写字母、小写字母和数字</li>
          <li>可以包含特殊字符 @$!%*?&</li>
        </ul>
      </div>
    </div>
  );
};

export default ResetPassword;